import { Layout, Button } from "antd";
import { message } from "./utils/customMessage";
import { LogoutOutlined } from "@ant-design/icons";
import { useState } from "react";
import { useNavigate, Outlet } from "react-router-dom";
import "./layouts/Layout.scss";

const { Sider, Header, Content } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();

  const handleLogout = () => {
    localStorage.removeItem("roleId");
    localStorage.removeItem("userId");
    localStorage.removeItem("token");
    localStorage.removeItem("userInfo");
    message.success("退出成功");
    navigate("/login");
  };

  return (
    <Layout className="layout-wrapper">
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
        breakpoint="xl"
        className={`sider ${collapsed ? "collapsed" : ""}`}
      >
        <div className="logo">
          {!collapsed && <span>电网数据管理系统</span>}
        </div>
      </Sider>
      <Layout>
        <Header className="header">
          <Button
            type="text"
            icon={<LogoutOutlined />}
            onClick={handleLogout}
            className="logout-btn"
          >
            退出登录
          </Button>
        </Header>
        <Content className="content">
          <div className="content-wrapper">
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;
